<template>
  <div class="waybillDetailwrap">
    <!-- <div class="titAddress">
        <p>起点: <span>上海市 浦东新区</span></p>
        <p>终点: <span>乌鲁木齐市 昌吉回族自治区</span></p>
    </div> -->
    <div class="waybillInfo">
      <div class="titleH3">
        <i></i>
        <h3>运单信息</h3>
      </div>
      <ul>
        <li><b>运单号</b>：<span>{{waybillInfo.transBillId}}</span></li>
        <li><b>运单日期</b>：<span>{{waybillInfo.transBillDate}}</span></li>
        <li><b>运单状态</b>：<span>{{waybillInfo.transBillStatus | transBillStatus}}</span></li>
        <li><b>运输方式</b>：<span>{{waybillInfo.transTypeName}}</span></li>
        <li><b>报价方式</b>：<span>{{waybillInfo.quoteType | quoteTypeName}}</span></li>
        <li><b>运输总量</b>：<i>{{(waybillInfo.transWeight*1).toFixed(3)}}</i><span>吨</span></li>
        <li><b>期望价格</b>：<i>{{(waybillInfo.transPrice*1).toFixed(2)}}</i><span>元/吨（含税）</span></li>
        <li><b>运费包含</b>：<span>{{waybillInfo.freeName}}</span></li>
        <li><b>预计杂费</b>：<i>{{(waybillInfo.otherAmount*1).toFixed(2)}}</i><span>元（税率：{{waybillInfo.feeTaxRate*100}}%）</span></li>
        <li><b>运输要求</b>：<span>{{waybillInfo.transRequest}}</span></li>
      </ul>
    </div>
    <div class="lineInfo">
      <div class="lineSing" v-for='(item,index) in transportD'>
        <div class="titleH3">
          <i></i>
          <h3>线路{{index+1}}（{{item.beginSiteProvice | city}}<span class="cent">至</span>{{item.endSiteProvice | city}}）
          </h3>
        </div>
        <ul>
          <li><i>入库抬头</i>：{{item.putinTitle}}</li>
          <li><i>提货点</i>：<span style="line-height:24px;">{{item.beginSiteStorage}}（{{item.beginSiteAddr}}）</span></li>
          <li><i>联系人</i>：<span>{{item.beginSiteContract}}      {{item.beginSitePhone}}</span>        </li>
          <li><i>提货时间</i>：<span>{{item.pickupTime}}</span></li>
          <li><i>卸货点</i>：<span style="line-height:24px;">{{item.endSiteStorage}}（{{item.endSiteAddr}}）</span></li>
          <li><i>联系人</i>：<span>{{item.endSiteContract}}   {{item.endSitePhone}}</span></li>
          <li><i>卸货时间</i>：<span>{{item.delivery}}</span></li>
          <li><i>货物信息</i>：<span class="goodsSpan">{{item.productTypeNameByApp}} {{((item.totalGoodsWeightByApp || 0)*1).toFixed(3)}}吨 {{item.totalGoodsCountByApp}}件</span><a class="fr" href="javascript:;" @click='showGoods(item.goods)'>查看详情</a></li>
          <li class="clearfix">
            <div class="fl ">
              <i class="disIcon"></i>
              <span class="dispathInfoTit">调度信息</span>
            </div>
            <div class="fr">
              <a href="javascript:;" class="dispathBtn" @click='driverInfo(index)'>调度</a>
            </div>
          </li>
        </ul>
        <ul class="dispatchInfoList" v-for='(item2,index) in item.travels'>
          <li>
            <span>{{item2.vehicleNum}}</span>
            <span>{{item2.driverUserName}}</span>
            <span>{{item2.driverPhone}}</span>
            <span class="editCount"><input type="text" name="name"  placeholder="请输入"
                                           v-model="item2.dispatchWeight">吨</span>
            <span class="close" @click="remove(item2,index)"></span>
          </li>
        </ul>
      </div>
    </div>
    <div class="needsclickWrap">
      <mt-button class='btn sure' type="primary" size="large" :disabled="dis" v-show="editBtn == 0" @click.native="save">保存</mt-button>
      <mt-button class='btn sure' type="primary" size="large" :disabled="dis" v-show="editBtn == 1" @click.native="adjust">调整</mt-button>
    </div>
    <!-- 详情 -->
    <mt-popup v-model="popupVisible" popup-transition="popup-fade">
      <mt-PopupTable :transportGoodsVo="transportGoodsVo"></mt-PopupTable>
    </mt-popup>
    <!-- 司机信息调度 -->
    <mt-popup v-model="driverInfoShow" popup-transition="popup-fade">
      <div class="driverInfo">
        <div class="head">
          <h3>选择司机</h3>
          <span @click='driverInfoShow = false'>×</span>
        </div>
        <ul>
          <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
            <li class="clearfix" v-for='(item,index) in list' :key='index'  @click="stouch(item)">
              <div class="fl radio">
                <input class="magic-radio" type="radio" :checked='touchId == item.guid' name="layout" :id="item.guid">
                <label :for="item.guid"></label>
              </div>
              <div class="fl">
                <div class="up">
                  <span>{{item.userName}}</span>
                  <span>{{item.userCode}}</span>
                  <span>{{item.vehicleNum}}</span>
                </div>
                <div class="down">
                  <span>{{item.vehicleTypeName}}</span>
                  <span>{{item.cardId}}</span>
                </div>
              </div>
            </li>
            <!-- 底部判断是加载图标还是提示“全部加载” -->
            <div class="more_loading">
              <div v-show="showLoading">
                <mt-spinner type="snake" color="#00ccff" :size="10" class="snake"></mt-spinner>
                <span>正在加载</span>
              </div>
              <span v-show="showALlLoad">已全部加载</span>
            </div>
          </div>
        </ul>
        <a href="javascript:;" class="footBtn" @click="selectDriver">确认</a>
      </div>
    </mt-popup>
  </div>
</template>
<script type="text/ecmascript-6">
  import ApiService from '@/services/API-servies'
  import {Tabbar, TabItem, Cell, TabContainer, TabContainerItem, Button, Popup, DatetimePicker,MessageBox,Spinner} from 'mint-ui';
  import MTabbar from '../foot/Tabbarfoot'
  import PopupTable from '../public/popupTable'

  export default {
    created() {
      this.getDetail();
    },
    mounted() {
    },
    data() {
      return {
        waybillInfo: {
          transBillId: '',
          transBillDate: '',
          transBillStatus: '',
          transTypeName: '',
          transWeight: '',
          otherAmount: '',
          transRequest: '',
          freeName: '',
          transAmount: '',
          transPrice:'',
          quoteType:'',
          feeTaxRate:0.11
        },
        transportD: [],
        transportGoodsVo: [],
        popupVisible: false,
        popupVisible2: false,
        driverInfoShow: false,
        transBillStatus: '',
        disabled: true,
        selected: 'a',
        list: [],
        busy: true,//默认允许滚动执行loadMore函数
        pageNo: 1,//默认分页为第一页
        pageSize: 10,//默认每页显示8条数据
        flag: false,//默认没有分页
        showLoading: true,
        showALlLoad: false,
        dispatchIndex: 0,//调度索引
        selectValue: "",
        editBtn: this.$route.query.ud,
        touchId: '',
        dis:false
      }
    },
    mounted(){
        setTimeout(() => {
            if(this.$isBrower.isAndroid){
            }else if(this.$isBrower.isIos){
                this.setIosTitleType();
            }
        }, 0)
    },
    methods: {
      toOffer() {
        this.popupVisible2 = true
      },
      getDetail() {
        let transBillId = this.$route.query.transBillId;
        let flag = this.$route.query.ud == 0 ? false : true;
        if (flag) {
          ApiService.dispatch.dispatchAdjustInfo({
            transBillId: transBillId
          }).then((res) => {
            if (res.meta.retCode === '0') {
              this.assign(res.data);
            }
          });
        } else {
          ApiService.dispatch.dispatchInfo({
            transBillId: transBillId
          }).then((res) => {
            if (res.meta.retCode === '0') {
              this.assign(res.data);
            }
          });
        }
      },
      assign(data) {
        for (let item in this.waybillInfo) {
          this.waybillInfo[item] = data[item];
        }
        ;
        this.transportD = data.ways;
        this.transBillStatus = data.transBillStatus
      },
      showGoods(transportGoodsVo) {
        this.popupVisible = true;
        this.transportGoodsVo = transportGoodsVo
      },
      driverInfo(index) {//第几条记录
        this.dispatchIndex = index;
        this.driverInfoShow = true;
        this.getList();
      },
      //保存调度
      save() {
        //拼接参数
        let subList = [];
        this.transportD.forEach(function (b, index) {
          b.travels.forEach(function (c, index) {
            subList.push({
              missionId: b.missionId,
              missionSubid: b.missionSubid,
              transBillSubId: b.transBillSubId,
              driverUserCode: c.driverUserCode,
              driverUserName: c.driverUserName,
              driverCardNum: c.driverCardNum,
              vehicleNum: c.vehicleNum,
              dispatchWeight: c.dispatchWeight,
              dispatchCount: c.dispatchCount,
              dispatchId: c.dispatchId,
            })
          })
        });

        if(subList.length<1){
          MessageBox('提示', '请填写调度信息');
          return;
        }
        let dispatchWeight=false
        subList.forEach(function (b, index) {
          if(b.dispatchWeight==null || b.dispatchWeight=="" || b.dispatchWeight==0){
            dispatchWeight=true;
            return;
          }
        });
        if(dispatchWeight){
          MessageBox('提示', '请填写调度吨位');
          return;
        }

        ApiService.dispatch.add({
          transBillId: this.$route.query.transBillId,
          source: 1,
          travels: JSON.stringify(subList)
        }).then(res => {
          if (res.meta.retCode === '0') {
            //跳转页面
            MessageBox('提示', '操作成功');
            this.dis=true;
            return;
          }
        })
      },
      adjust() {
        //拼接参数
        let subList = [];
        this.transportD.forEach(function (b, index) {
          b.travels.forEach(function (c, index) {
            subList.push({
              missionId: b.missionId,
              missionSubid: b.missionSubid,
              transBillSubId: b.transBillSubId,
              driverUserCode: c.driverUserCode,
              driverUserName: c.driverUserName,
              driverCardNum: c.driverCardNum,
              vehicleNum: c.vehicleNum,
              dispatchWeight: c.dispatchWeight,
              dispatchCount: c.dispatchCount,
              dispatchId: c.dispatchId,
            })
          })
        });

        if(subList.length<1){
          MessageBox('提示', '请填写调度信息');
          return;
        }
        let dispatchWeight=false
        subList.forEach(function (b, index) {
          if(b.dispatchWeight==null || b.dispatchWeight=="" || b.dispatchWeight==0){
            dispatchWeight=true;
            return;
          }
        });

        if(dispatchWeight){
          MessageBox('提示', '请填写调度吨位');
          return;
        }


        ApiService.dispatch.adjust({
          transBillId: this.$route.query.transBillId,
          source: 1,
          travels: JSON.stringify(subList)
        }).then(res => {
          if (res.meta.retCode === '0') {
            //跳转页面
            MessageBox('提示', '操作成功');
            this.dis=true;
            return;
          }
        })
      },
      /*changeRadio(item){
        this.selectValue={
          dispatchId:null,
          driverPhone:item.userCode,
          driverUserCode:item.userCode,
          vehicleNum:item.vehicleNum,
          driverUserName:item.userName,
          vehicleType:item.vehicleType,
          dispatchCount:0,
          driverCardNum:item.driverCardNum,
          dispatchWeight:0
        };
      },*/
      stouch(item) {
        this.touchId = item.guid;
        this.selectValue = {
          dispatchId: null,
          driverPhone: item.userCode,
          driverUserCode: item.userCode,
          vehicleNum: item.vehicleNum,
          driverUserName: item.userName,
          vehicleType: item.vehicleType,
          dispatchCount: 0,
          driverCardNum: item.cardId,
          dispatchWeight: (this.waybillInfo.transWeight*1).toFixed(3)
        };
      },
      //选择司机
      selectDriver() {
        this.driverInfoShow = false;
        this.transportD[this.dispatchIndex].travels.push(this.selectValue);
      },
      //移除司机
      remove(item2, index) {
        this.transportD[this.dispatchIndex].travels.splice(index, 1);
      },
      getList(flag) {
        this.showLoading = true;
        ApiService.travelUser.list({
          pageSize: this.pageSize,
          pageNo: this.pageNo
        }).then(res => {
          this.showLoading = true;
          if (flag) {//判断是否通过分页
            this.list = this.list.concat(res.data.list);//分页数据追加到这个list里面
            if (res.data.list.length == 0 || res.data.list.length < 10) {//判断数是否加载完成，就让数据截停
              this.busy = true;
              this.showLoading = false;
              this.showALlLoad = true;
            } else {
              this.busy = false;
            }
          } else {
            this.list = res.data.list;
            this.busy = false;
            if (res.data.list.length == 0 || res.data.list.length < 10) {//判断数是否加载完成，就让数据截停
              this.busy = true;
              this.showLoading = false;
              this.showALlLoad = true;
            }
          }
        })
      },
      loadMore: function () {
        this.busy = true;
        setTimeout(() => {
          this.pageNo++;
          this.getList(true);
        }, 500)
      },
      //ios 设置头部信息
          setIosTitleType(){
            let params = {
              isReturn: true,
              isSearch: false,
              isTitleSegment:false
            };
            this.$bridge.callhandler('needBarButton', params, (data) => {})
          }
    },
    watch: {},
    filters: {
      city(val) {
        var index = val.indexOf('-') + 1;
        return val.substring(index)
      },
      transBillStatus(val) {
        if (val == 30) {
          return '待竞价'
        } else if (val == 50) {
          return '待选择'
        } else if (val == 60) {
          return '参与竞价'
        } else if (val == 65) {
          return '待调度'
        } else if (val == 60) {
          return '已派运'
        } else if (val == 68) {
          return '已送达'
        } else if (val == 71) {
          return '返单待客户确认'
        } else if (val == 80) {
          return '运输完成'
        } else if (val == 95) {
          return '结算完成'
        }
      },
      quoteTypeName(val) {
        if (val == 10) {
          return '总价'
        } else if (val == 20) {
          return '单价'
        }
      },
    },
    components: {
      MtTabbar: Tabbar,
      MtTabItem: TabItem,
      mtCell: Cell,
      MtTabContainer: TabContainer,
      MtTabContainerItem: TabContainerItem,
      MTabbar,
      MtButton: Button,
      MtPopup: Popup,
      MtPopupTable: PopupTable,
      MtDatetimePicker: DatetimePicker,
      MtSpinner: Spinner,
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import "~common/less/variable";
  @import "~common/less/modules/waybillDetail.less";
  @import "~common/less/modules/public.less";

  .waybillDetailwrap {

    i, span, li {
      font-weight: 400;
    }
    i, b{
      text-align: justify;
      text-align-last: justify;
      line-height: 0;
    }

    .cent {
      margin: 0 20px
    }
    .lineInfo{
      ul>li{
        .phone{
          margin-left: 20px;
        }
      }
    }

    .dispathInfoTit {
      font-size: 28px;
      display: inline-block;
      line-height: 58px;
    }

    .dispathBtn {
      background: @blue;
      color: #fff;
      border-radius: 8px;
      font-size: 26px;
      padding: 12px 18px;
      font-weight: 400;
    }

    .lineSing .dispatchInfoList {
      margin-top: -20px;
      li {
        padding: 20px;
        border-bottom: none;
        .editCount{
          width: 140px;
          font-size: 28px;
          input{
            width: 100px;
            font-size: 28px;
          }
        }
        span {
          padding-left: 0px;
          display: inline-block;
          &:nth-child(1) {
            width: 160px;
          }

          &:nth-child(2) {
            width: 90px;
          }

          &:nth-child(3) {
            width: 184px;
          }

          &:nth-child(4) {
            width: 140px;
          }

          &.close {
            width: 36px;
            height: 36px;
            background: url(../../common/imgs/close.png) no-repeat 50% 50%;
            vertical-align: middle;
            background-size: 80%
          }
        }
        &:nth-child(odd) {
          background: 30px 30px;
        }
      }
    }

  }

  .quote {
    width: 756px;
    padding: 30px;

    .row {
      padding: 10px 30px;

      input {
        padding: 10px;
        width: 680px;
        border: 2px solid #ccc;
        border-radius: 6px;
        font-size: 15px;

        &
        .priceIpt {
          width: 500px
        }

      }
      .priceText {
        font-size: 16px;
        color: #3180FF
      }

    }
    .price {
      font-size: 14px;

      i {
        color: #FB0015
      }

      .allPrice {
        margin-left: 60px
      }

    }
  }
</style>















